<template>
	<div class="xtx-goods-page">
		<div class="container" v-if="goodsDetailData.details">
			<!-- 面包屑 -->
			<div class="bread-container">
				<el-breadcrumb separator=">">
					<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ name: 'category', params: { id: goodsDetailData.categories[1].id } }">
						{{ goodsDetailData.categories[1].name }}
					</el-breadcrumb-item>
					<el-breadcrumb-item :to="{ name: 'subCategory', params: { id: goodsDetailData.categories[0].id } }">
						{{ goodsDetailData.categories[0].name }}
					</el-breadcrumb-item>
					<el-breadcrumb-item>{{ goodsDetailData.name }}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<!-- 商品信息 -->
			<div class="info-container">
				<div>
					<div class="goods-info">
						<div class="media">
							<!-- 图片预览区 -->
							<ImageView :image-list="goodsDetailData.mainPictures"></ImageView>
							<!-- 统计数量 -->
							<ul class="goods-sales">
								<li>
									<p>销量人气</p>
									<p>{{ goodsDetailData.salesCount }}</p>
									<p><i class="iconfont icon-task-filling"></i>销量人气</p>
								</li>
								<li>
									<p>商品评价</p>
									<p>{{ goodsDetailData.commentCount }}</p>
									<p><i class="iconfont icon-comment-filling"></i>查看评价</p>
								</li>
								<li>
									<p>收藏人气</p>
									<p>{{ goodsDetailData.collectCount }}</p>
									<p><i class="iconfont icon-favorite-filling"></i>收藏商品</p>
								</li>
								<li>
									<p>品牌信息</p>
									<p>{{ goodsDetailData.brand?.name }}</p>
									<p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p>
								</li>
							</ul>
						</div>
						<div class="spec">
							<!-- 商品信息区 -->
							<p class="g-name">{{ goodsDetailData.name }}</p>
							<p class="g-desc">{{ goodsDetailData.desc }}</p>
							<p class="g-price">
								<span>{{ goodsDetailData.oldPrice }}</span>
								<span>{{ goodsDetailData.price }}</span>
							</p>
							<div class="g-service">
								<dl>
									<dt>促销</dt>
									<dd>12月好物放送，App领券购买直降120元</dd>
								</dl>
								<dl>
									<dt>服务</dt>
									<dd>
										<span>无忧退货</span>
										<span>快速退款</span>
										<span>免费包邮</span>
										<a href="javascript:;">了解详情</a>
									</dd>
								</dl>
							</div>
							<!-- sku组件 -->
							<XtxSku :goods="goodsDetailData" @change="handlerSkuChange"></XtxSku>
							<!-- 数据组件 -->
							<el-input-number v-model="count" :min="1" @change="goodsNumChange" />
							<!-- 按钮组件 -->
							<div>
								<el-button type="primary" size="large" class="btn" @click="addCart">加入购物车</el-button>
							</div>
						</div>
					</div>
					<div class="goods-footer">
						<div class="goods-article">
							<!-- 商品详情 -->
							<div class="goods-tabs">
								<nav>
									<a>商品详情</a>
								</nav>
								<div class="goods-detail">
									<!-- 属性 -->
									<ul class="attrs">
										<li v-for="item in goodsDetailData.details.properties" :key="item.value">
											<span class="dt">{{ item.name }}</span>
											<span class="dd">{{ item.value }}</span>
										</li>
									</ul>
									<!-- 图片 -->
									<img v-for="img in goodsDetailData.details.pictures" :src="img" :key="img" />
								</div>
							</div>
						</div>
						<!-- 24热榜+专题推荐 -->
						<div class="goods-aside">
							<DetailHotList :hot-type="1"></DetailHotList>
							<DetailHotList :hot-type="2"></DetailHotList>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'GoodsDetail',
	}
</script>

<script setup>
	import { ref, onMounted } from 'vue'
	import { useRoute, onBeforeRouteUpdate } from 'vue-router'
	import { reqGoodsDetailData } from '@/apis/goodsDetail'
	import DetailHotList from './components/DetailHotList.vue'
	import { useCartStore } from '@/stores/cart'

	const route = useRoute()
	// cartStore
	const cartStore = useCartStore()
	// 商品详情数据
	const goodsDetailData = ref({})
	// 选择的商品的数量
	const count = ref(1)
	// 选择的sku数据
	let selectedSku = {}

	// 获取商品详情数据
	async function getGoodsDetailData(id = route.params.id) {
		try {
			const res = await reqGoodsDetailData(id)
			goodsDetailData.value = res.result
		} catch (error) {
			ElMessage({
				type: 'error',
				message: error.response?.data?.error,
			})
		}
	}

	onMounted(() => {
		getGoodsDetailData()
	})

	onBeforeRouteUpdate(to => {
		getGoodsDetailData(to.params.id)
	})

	// 获取商品sku数据
	function handlerSkuChange(skuData) {
		selectedSku = skuData
	}

	// 商品数量change时触发
	function goodsNumChange(currentValue) {
		if (!currentValue) {
			count.value = 1
		}
	}

	// 加入购物车
	function addCart() {
		// 选择了完整的sku
		if (selectedSku.skuId) {
			cartStore.addCart({
				id: goodsDetailData.value.id, // 商品id
				name: goodsDetailData.value.name, // 商品名称
				picture: goodsDetailData.value.mainPictures[0], // 图片
				price: goodsDetailData.value.price, // 最新价格
				count: count.value, // 商品数量
				skuId: selectedSku.skuId, // skuId
				attrsText: selectedSku.specsText, // 规格文本
				selected: true, // 商品是否被选中
			})
		} else {
			// 提示用户选择sku
			ElMessage.warning('请选择商品规格')
		}
	}
</script>

<style scoped lang="scss">
	.xtx-goods-page {
		.goods-info {
			min-height: 600px;
			background: #fff;
			display: flex;

			.media {
				width: 580px;
				height: 600px;
				padding: 30px 50px;
			}

			.spec {
				flex: 1;
				padding: 30px 30px 30px 0;
			}
		}

		.goods-footer {
			display: flex;
			margin-top: 20px;

			.goods-article {
				width: 940px;
				margin-right: 20px;
			}

			.goods-aside {
				width: 280px;
				min-height: 1000px;
			}
		}

		.goods-tabs {
			min-height: 600px;
			background: #fff;
		}

		.goods-warn {
			min-height: 600px;
			background: #fff;
			margin-top: 20px;
		}

		.number-box {
			display: flex;
			align-items: center;

			.label {
				width: 60px;
				color: #999;
				padding-left: 10px;
			}
		}

		.g-name {
			font-size: 22px;
		}

		.g-desc {
			color: #999;
			margin-top: 10px;
		}

		.g-price {
			margin-top: 10px;

			span {
				&::before {
					content: '¥';
					font-size: 14px;
				}

				&:first-child {
					color: $priceColor;
					margin-right: 10px;
					font-size: 22px;
				}

				&:last-child {
					color: #999;
					text-decoration: line-through;
					font-size: 16px;
				}
			}
		}

		.g-service {
			background: #f5f5f5;
			width: 500px;
			padding: 20px 10px 0 10px;
			margin-top: 10px;

			dl {
				padding-bottom: 20px;
				display: flex;
				align-items: center;

				dt {
					width: 50px;
					color: #999;
				}

				dd {
					color: #666;

					&:last-child {
						span {
							margin-right: 10px;

							&::before {
								content: '•';
								color: $xtxColor;
								margin-right: 2px;
							}
						}

						a {
							color: $xtxColor;
						}
					}
				}
			}
		}

		.goods-sales {
			display: flex;
			width: 400px;
			align-items: center;
			text-align: center;
			height: 140px;

			li {
				flex: 1;
				position: relative;

				~ li::after {
					position: absolute;
					top: 10px;
					left: 0;
					height: 60px;
					border-left: 1px solid #e4e4e4;
					content: '';
				}

				p {
					&:first-child {
						color: #999;
					}

					&:nth-child(2) {
						color: $priceColor;
						margin-top: 10px;
					}

					&:last-child {
						color: #666;
						margin-top: 10px;

						i {
							color: $xtxColor;
							font-size: 14px;
							margin-right: 2px;
						}

						&:hover {
							color: $xtxColor;
							cursor: pointer;
						}
					}
				}
			}
		}
	}

	.goods-tabs {
		min-height: 600px;
		background: #fff;

		nav {
			height: 70px;
			line-height: 70px;
			display: flex;
			border-bottom: 1px solid #f5f5f5;

			a {
				padding: 0 40px;
				font-size: 18px;
				position: relative;

				> span {
					color: $priceColor;
					font-size: 16px;
					margin-left: 10px;
				}
			}
		}
	}

	.goods-detail {
		padding: 40px;

		.attrs {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 30px;

			li {
				display: flex;
				margin-bottom: 10px;
				width: 50%;

				.dt {
					width: 100px;
					color: #999;
				}

				.dd {
					flex: 1;
					color: #666;
				}
			}
		}

		> img {
			width: 100%;
		}
	}

	.btn {
		margin-top: 20px;
	}

	.bread-container {
		padding: 25px 0;
	}
</style>
